<template>
  <div>
    <van-form>
    <van-nav-bar
        right-text="注册账号>>"
        @click-right="tzregister()"
    />
    <div id="dvl1">
      <!--    1.图片-->
      <div>
        <van-image
            round
            width="6rem"
            height="6rem"
            src="https://img01.yzcdn.cn/vant/cat.jpeg"
        />
      </div>
      <!--    2.登录表单-->
      <div>
        <div >
          <van-field v-model="user1.phone" label="账号" required placeholder="请输入手机号" />
          <van-field v-model="user1.password" type="password" required label="密码" placeholder="请输入密码" />
          <div style="margin: 30px;">
            <van-button round block type="primary" @click="loginPassword()" >登录</van-button>
          </div>
        </div>
      </div>
      <!-- 3.登录形式切换-->
      <div class="dv3">
        <van-row>
          <van-col span="8">
            <span><router-link to="/lto"><span style="font-size: 15px">手机验证码登录</span></router-link></span>
          </van-col>
          <van-col span="12">

          </van-col>
          <van-col span="4">
            <span><router-link to="/find"><span style="font-size: 15px">忘记密码？</span></router-link></span>
          </van-col>
        </van-row>
      </div>
    </div>
    </van-form>
  </div>

</template>
<script>
export default {
  name: "Login",
  data() {
    return {
      logintype: true,
      user1: {
        phone: "",
        password: ""
      },
    }
  }, methods: {
    loginPassword() {
      //账号和密码登录
      this.axios.post("/api/user/loginpassword.do", this.user1).then(res => {
        if (res.data.code == 200) {
          //登录成功
          this.$toast("登录成功！");
          //更改Vuex中的值吗
          this.$store.commit("setToken", res.data.data);
          //跳转首页 vue-router
          this.$router.push("/my");
        } else {
          this.$toast(res.data.msg);
        }
      })
    },
    tzregister() {
      this.$router.push("/register");
    }
  }
}
</script>
<style>
.dv3 span{
  color: gray;
  font-size: 10px;
  margin-top: 20px;
}
#dvl1{
  align-items: center;
  margin-top: 20%;
}
</style>